<template>
	<view class="account-box">
		<image src="../../static/my-account-bg.png" class="my-account-bg" mode=""></image>
		<view class="content" v-if="userData">
			<view class="c-1">
				<text>账户余额(USDT)</text>
				<!-- <image src="../../static/right-wite.png" mode=""></image> -->
			</view>
			<view class="c-2">
				<text class="amount">{{userData?userData.balance:'0'}}</text>
				<text class="unit">USDT</text>
			</view>
			<text class="news" v-if="userData.currentInvestRate!=0">活期理财日收益率{{userData.currentInvestRate}}% 累计活期收益{{userData.currentTotalAmount}}u</text>
			<view class="c-3">
				<view class="">
					<text class="label">累计充值</text>
					<text class="value">{{userData? userData.totalRecharge	+' U':'0'}}</text>
				</view>
				<view class="">
					<text class="label">累计提现</text>
					<text class="value">{{userData? userData.totalWithdrawal+' U':'0'}}</text>
				</view>
			</view>
			<view class="c-3">
				<view class="">
					<text class="label">昨日收益</text>
					<text class="value">{{userData? userData.yesterdayAmount+' U':'0'}}</text>
				</view>
				<view class="">
					<text class="label">累计收益</text>
					<text class="value">{{userData? userData.totalAmount+' U':'0'}}</text>
				</view>
			</view>

		</view>
		<view class="c-4">
			<view class="" @click.stop="bindRecharge">
				<image src="../../static/cz.png" mode=""></image>
				<text>充值</text>
			</view>
			<text class="line"></text>
			<view class="" @click.stop="bindTrans">
				<image src="../../static/zz.png" mode=""></image>
				<text>转账</text>
			</view>
			<text class="line"></text>
			<view class="" @click.stop="bindReflect">
				<image src="../../static/tx.png" mode=""></image>
				<text>提现</text>
			</view>
		</view>
	</view>
	<view class="list">
		<view class="item" @click="bindAbout('recharge')">
			<view class="">
				<image src="../../static/pay-1.png" mode=""></image>
				<text>充值记录</text>
			</view>
			<image src="../../static/rihgt-999.png" mode=""></image>
		</view>
		<view class="item" @click="bindAbout('transfer')">
			<view class="">
				<image src="../../static/pay-2.png" mode=""></image>
				<text>转账记录</text>
			</view>
			<image src="../../static/rihgt-999.png" mode=""></image>
		</view>
		<view class="item" @click="bindAbout('withdrawal')">
			<view class="">
				<image src="../../static/pay-3.png" mode=""></image>
				<text>提现记录</text>
			</view>
			<image src="../../static/rihgt-999.png" mode=""></image>
		</view>
		<view class="item" @click="bindAbout('')">
			<view class="">
				<image src="../../static/pay-4.png" mode=""></image>
				<text>账户明细</text>
			</view>
			<image src="../../static/rihgt-999.png" mode=""></image>
		</view>
	</view>
</template>

<script setup>
	import {
		user,
		
	} from '@/util/api.js'
	import { ref } from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	onShow(() => {
		
		getUser()
		
	})
	const userData = ref()
	// 获取当前登录用户信息
	const getUser = async() =>{
		const result = await user()
		console.log(result)
		if(result.code==200){
			userData.value = result.data
		}else{
			userData.value = null
		}
	}
	
	const bindAbout = (item) => {
		uni.navigateTo({
			url: "/pages/bill/bill?state=" + item
		})
	}
	// 充值
	const bindRecharge = () => {
		uni.navigateTo({
			url: "/pages/recharge/recharge"
		})

	}
	// 转账
	const bindTrans = () => {
		uni.navigateTo({
			url: "/pages/transfer/transfer"
		})
	}
	// 提现
	const bindReflect = () => {
		uni.navigateTo({
			url: "/pages/withdrawal/withdrawal"
		})
	}
</script>

<style lang="scss">
	.list {
		margin: 30rpx auto;
		width: 597rpx;

		background: #FFFFFF;
		padding: 20rpx 38rpx;
		box-shadow: 0px 15rpx 38rpx 0px rgba(49, 54, 70, 0.06);
		border-radius: 23rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;

			>image {
				width: 23rpx;
				height: 23rpx;
				display: block;
			}

			>view {
				display: flex;
				align-items: center;

				image {
					display: block;
					width: 38rpx;
					height: 38rpx;
					margin-right: 20rpx;
				}

				text {
					display: block;
					color: #313646;
					font-size: 28rpx;
				}
			}
		}
	}

	.account-box {
		position: relative;

		height: 520rpx;

		.my-account-bg {
			position: absolute;
			width: 100%;
			height: 585rpx;
			top: 0;
			left: 0;
		}

		

		.c-4 {
			position: absolute;
			z-index: 99;
			width: 680rpx;
			height: 112rpx;
			left: 72rpx;
			bottom: 0;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 0px 0px 23rpx 23rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: -36rpx;

			.line {
				display: block;
				width: 1rpx;
				height: 50rpx;
				background: #fff;
				opacity: 0.2;
			}

			view {
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					display: block;
					width: 58rpx;
					height: 58rpx;
					margin-right: 12rpx;
				}

				text {
					color: #fff;
					font-size: 28rpx;
				}
			}
		}

		.content {
			position: relative;
			top: 72rpx;
			padding: 0 72rpx;

			.c-1 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					display: block;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.7);
				}

				image {
					display: block;
					width: 23rpx;
					height: 23rpx;
				}
			}
			.news {
				display: block;
				color: rgba(255, 255, 255, 0.7);
				font-size: 24rpx;
				margin-bottom: 30rpx;
			}

			.c-2 {
				display: flex;
				align-items: flex-end;
				margin-top: 50rpx;
				margin-bottom: 30rpx;

				.amount {
					font-size: 58rpx;
					color: #fff;
					font-weight: bold;
					display: block;
					margin-right: 18rpx;
					line-height: 1;
				}

				.unit {
					font-size: 27rpx;
					color: #fff;
					line-height: 1;
				}
			}

			.c-3 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				view {
					display: flex;

					.label {
						color: rgba(255, 255, 255, 0.7);
						font-size: 24rpx;
						display: block;
						margin-right: 20rpx;
					}

					.value {
						color: rgba(255, 255, 255, 1);
						font-size: 24rpx;
					}
				}
			}

		}
	}

	page {
		background: #F6F7F9;
	}
</style>